<template>
  <section class="section">
    <el-row>
      <el-col :span="8">
        <div class="left">
          <div class="header">时间信息</div>
          <div class="main">
            <el-form
              size="mini"
              :rules="rules"
              label-width="80px"
              :model="formData"
              label-suffix=":"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="受理编号" prop="ACCEPTANCE_NO">
                    <el-input
                      v-model="formData.ACCEPTANCE_NO"
                      placeholder="受理编号"
                      style="width: 100%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="来电号码">
                    <el-input
                      v-model="formData.INCOMING_CALL_NUMBER"
                      placeholder="来电号码"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="呼叫时间">
                    <el-date-picker
                      v-model="formData.CALL_TIME"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择呼叫时间"
                      style="width: 100%"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="患者姓名">
                    <el-input
                      v-model="formData.PATIENT_NAME"
                      placeholder="患者姓名"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="患者性别">
                    <el-select
                      v-model="formData.PATIENT_SEX"
                      placeholder="性别"
                      style="width: 100%"
                    >
                      <el-option label="男" value="1"></el-option>
                      <el-option label="女" value="2"></el-option>
                      <el-option label="不详" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="患者年龄">
                    <el-input
                      v-model="formData.PATIENT_AGE"
                      placeholder="年龄"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="病人病情">
                    <el-input
                      v-model="formData.DISEASE"
                      placeholder="病人病情"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="详细病情">
                    <el-select
                      v-model="formData.DISEASE_DETAIL"
                      placeholder="详细病情"
                      style="width: 100%"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="出诊单位">
                    <el-select
                      v-model="formData.ORG_ID"
                      placeholder="出诊单位"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in siteList"
                        :key="item.TABLE_UUID"
                        :label="item.ORG_NAME"
                        :value="item.TABLE_UUID"
                      ></el-option> </el-select></el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="呼救地点: 市县" label-width="115px">
                    <el-select v-model="formData.COUNTY" placeholder="市县">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="市镇">
                    <el-select v-model="formData.TOWN" placeholder="市镇">
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="街区信息">
                    <el-select
                      v-model="formData.DISTRICT_STREET"
                      placeholder="街区信息"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="详细地点">
                    <el-input
                      v-model="formData.DETAIL_ADDRESS"
                      placeholder="详细地点"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="定位地点">
                    <el-input
                      v-model="formData.POSITIONING_LOCATION"
                      placeholder="定位地点"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="调度人员">
                    <el-input
                      v-model="formData.DISPATCH_PERSON"
                      placeholder="调度人员"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="派诊时间">
                    <el-date-picker
                      v-model="formData.DISPATCH_DIAGNOSIS_TIME"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      placeholder="选择派诊时间"
                      style="width: 100%"
                    >
                    </el-date-picker> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="接回人数">
                    <el-input
                      v-model="formData.TAKE_NUM"
                      placeholder="接回人数"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="备注信息">
                    <el-input
                      v-model="formData.REMARK"
                      placeholder="备注信息"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
            </el-form>
            <div class="button-group">
              <div class="btn" @click="saveData">事件保存</div>
              <div class="btn">派单打印</div>
              <div
                class="btn"
                @click="getSelectEventInfoList({ EVENT_STATUS: '0' })"
              >
                未结事件
              </div>
              <div class="btn" @click="getSelectEventInfoList()">事件查询</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="right">
          <div class="header">事件及车辆信息</div>
          <div class="main">
            <div class="operate_btn">
              <div
                class="btn"
                @click="eventInfo"
                :style="{
                  background: compName === 'event' ? '#e86b55' : '#8c8c8c',
                }"
              >
                事件追踪
              </div>
              <div
                class="btn"
                @click="carInfo"
                :style="{
                  background: compName === 'car' ? '#e86b55' : '#8c8c8c',
                }"
              >
                车辆信息
              </div>
              <div
                class="btn"
                @click="gps"
                :style="{
                  background: compName === 'gps' ? '#e86b55' : '#8c8c8c',
                }"
              >
                电子地图
              </div>
            </div>
            <EventTable v-show="compName == 'event'" :eventList="eventList" />
            <CarTable v-show="compName == 'car'" :carList="carList" />
            <CarMap v-if="compName == 'gps'" />
          </div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>
<script>
import {
  selectEventInfoList,
  getSiteList,
  selectCarInfoList,
  saveOrUpdateEvent,
} from "@/api/emergencyDispatch/emergencyDispatch.js";
import EventTable from "./eventTable";
import CarTable from "./carTable";
import CarMap from "./carMap";
export default {
  components: {
    EventTable,
    CarTable,
    CarMap,
  },
  data() {
    return {
      formData: {},
      eventList: [],
      carList: [],
      siteList: [],
      compName: "",
      rules: {
        ACCEPTANCE_NO: [
          { required: false, message: "请输入受理编号", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  created() {
    this.eventInfo();
    this.getSiteList();
  },
  mounted() {},
  methods: {
    getSelectEventInfoList(data = {}) {
      selectEventInfoList(data).then((res) => {
        this.eventList = res.result;
      });
    },
    getSelectCarInfoList() {
      selectCarInfoList().then((res) => {
        this.carList = res.result;
      });
    },
    getSiteList() {
      getSiteList().then((res) => {
        this.siteList = res.result;
      });
    },
    saveData() {
      saveOrUpdateEvent(this.formData).then((res) => {
        if (res.code != 0) {
          return this.$message.error(res.message);
        }
        this.formData = {};
        this.getSelectEventInfoList();
      });
    },
    eventInfo() {
      this.compName = "event";
      this.getSelectEventInfoList();
    },
    carInfo() {
      this.compName = "car";
      this.getSelectCarInfoList();
    },
    gps() {
      this.compName = "gps";
    },
  },
};
</script>
<style scoped lang='scss'>
.section {
  margin-top: 5px;
  .left {
    .header {
      height: 40px;
      line-height: 40px;
      background: #00b384;
      color: white;
      font-size: 14px;
      padding-left: 5px;
    }
    .main {
      height: 450px;
      padding: 10px;
      background: #f0f0f0;
      ::v-deep .el-form-item {
        margin-bottom: 8px;
      }
      .button-group {
        display: flex;
        justify-content: space-around;
        .btn {
          text-align: center;
          width: 100px;
          height: 25px;
          line-height: 25px;
          border-radius: 30px;
          color: white;
          background: #00b385;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
  .right {
    padding-left: 5px;
    .header {
      height: 40px;
      line-height: 40px;
      background: #00b384;
      color: white;
      font-size: 14px;
      padding-left: 5px;
    }
    .main {
      padding: 10px;
      background: #f0f0f0;
      height: 450px;
      .operate_btn {
        display: flex;
        .btn {
          margin: 0 5px;
          text-align: center;
          width: 100px;
          height: 25px;
          line-height: 25px;
          border-radius: 30px;
          color: white;
          //background: #8c8c8c;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
